<script setup>
import { reactive } from "vue";
const data = reactive({
  tab: ["全部", "待支付", "代收讲义", "已支付", "已取消"],
  index1: 0,
});
const tab = (i) => {
  data.index1 = i;
};
</script>
<template>
  <div class="ding">
    <header>
      <van-icon name="arrow-left" @click="$router.back()" />
      <h3>我的订单</h3>
    </header>
    <ul class="tab">
      <li
        v-for="(item, index) in data.tab"
        :key="index"
        :class="index == data.index1 ? 'active' : ''"
        @click="tab(index)"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>
<style lang="scss" scoped>
.ding {
  header {
    height: 88px;
    display: flex;
    align-items: center;
    margin-top: 20px;
    .van-icon {
      width: 60px;
      height: 60px;
      text-align: center;
    }
    h3 {
      flex: 1;
      text-align: center;
      font-size: 36px;
    }
  }
  .tab {
    display: flex;
    align-items: center;
    justify-content: space-around;
    text-align: center;
    margin-top: 30px;
    li {
      width: 20%;
      font-size: 32px;
    }
    .active {
      color: #f00;
    }
  }
}
</style>
